<script setup>
import { ref, watch, computed } from "vue";
import { useDetectionStoreHook } from "../../store/modules/detection";
import { useProcessStoreHook } from "../../store/modules/process";
import { useSerialsStoreHook } from "../../store/modules/serials";
import NotFound from "../../assets/notfound.svg";
import useLoading from "../../utils/loading";

const detection = useDetectionStoreHook();
const processStore = useProcessStoreHook();
const serialStore = useSerialsStoreHook();

const technicParams = computed(() => {
  const res = {};
  for (const key in processStore.technicParams) {
    if (Object.hasOwnProperty.call(processStore.technicParams, key)) {
      const item = processStore.technicParams[key];
      let text = "";
      if (item.min === 0) text = "≤" + item.max;
      else if (item.max >= 999) text = "≥" + item.min;
      else text = item.min + " ~ " + item.max;
      res[key] = { text, ...item };
    }
  }
  return res;
});

async function submit() {
  const loading = useLoading();
  await detection.insertData(crypto.randomUUID().toString().split("-").join(""));
  loading.close();
}

const shortCode = ref("");
watch(
  () => processStore.modelCode,
  async (val) => {
    if (val) {
      const res = await processStore.getShortCode();
      shortCode.value = res;
    }
  }
);
</script>

<template>
  <el-empty
    v-if="!processStore.workCenterId"
    description="请先选择作业岗位"
    :image-size="240"
    :image="NotFound"
  />
  <el-form v-else class="form" label-width="96px" size="large">
    <el-divider content-position="left">量仪检项</el-divider>
    <el-empty
      v-if="detection.measureFields?.length === 0"
      :image-size="48"
      description="该岗位无量仪检项"
    />
    <el-row v-else class="row" :gutter="8">
      <el-col v-for="field in detection.measureFields" :key="field.name" :sm="8" :lg="6" :xl="4">
        <el-form-item :label="field.name">
          <el-input
            v-model="field.value"
            input-style="text-align: center"
            class="number-input"
            :placeholder="technicParams[field.name]?.text"
            readonly
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-divider content-position="left">其他检项</el-divider>
    <el-empty
      v-if="detection.otherFields?.length === 0"
      :image-size="48"
      description="该岗位无其他检项"
    />
    <el-row v-else class="row" :gutter="8">
      <el-col v-for="field in detection.otherFields" :key="field.name" :sm="8" :lg="6" :xl="4">
        <el-form-item v-if="field.method === 2" :label="field.name">
          <el-input-number
            v-model="field.value"
            class="number-input"
            :placeholder="technicParams[field.name]?.text"
            :controls="false"
          />
        </el-form-item>
        <el-form-item v-else :label="field.name">
          <el-switch
            v-model="field.value"
            class="switch"
            :active-text="field.name === '字码' ? shortCode : 'OK'"
            :inactive-text="field.name === '字码' ? '其他' : 'NG'"
            :active-value="1"
            :inactive-value="0"
            size="large"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <div class="submit">
      <el-checkbox v-model="serialStore.autoReport" size="large">自动上报</el-checkbox>
      <el-button type="primary" @click="submit()">上 报</el-button>
    </div>
  </el-form>
</template>

<style lang="scss" scoped>
.row {
  margin-right: 18px !important;
}

.switch {
  height: 48px;
  --el-switch-off-color: #ff4949;
  --el-switch-on-color: #13ce66;
}

.form {
  margin: 0 12px;
}

:deep(.el-divider) {
  .el-divider__text {
    color: #888888;
  }

  margin: 8px 0 18px 0;
}

.row-btn {
  display: flex;
  justify-content: flex-end;
}

.submit {
  width: 128px;
  position: absolute;
  bottom: 24px;
  right: 24px;
  height: 100px;
  display: flex;
  flex-direction: column;

  .el-button {
    height: 56px !important;
    width: 100%;
  }
}

:deep(.el-empty) {
  padding: 0;
}

.number-input {
  width: 100%;
  text-align: left;
}
</style>
